<template>
  <el-container>
    <my-theme-card>
      <el-tabs type="border-card" @tab-click="changeLink">
        <el-tab-pane label="任务基本信息">
          <el-divider content-position="left">任务信息</el-divider>
          <el-form ref="taskForm" :model="currentTask" label-width="130px" :inline="true">
            <el-form-item label="任务名称">
              <el-input v-model="currentTask.tskname" style="width:180px" />
            </el-form-item>
            <el-form-item label="流程编号">
              <el-input v-model="currentTask.procno" style="width:180px" readonly />
            </el-form-item>
            <el-form-item label="流程名称">
              <el-input v-model="currentTask.procname" style="width:180px" readonly />
            </el-form-item>
            <el-form-item label="任务状态">
              <el-select v-model="currentTask.tskstat" placeholder="请选择">
                <el-option
                  v-for="item in dir_tskstat"
                  :key="item.id"
                  :label="item.label"
                  :value="item.data"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="节点" prop="nodesn">
              <el-input v-model="currentTask.nodesn" style="width:180px" />
            </el-form-item>
            <el-form-item label="备注" prop="content">
              <el-input v-model="currentTask.remark" style="width:180px" />
            </el-form-item>
          </el-form>
          <el-divider content-position="left">任务意见信息</el-divider>
          <el-row>
            <el-input v-model="taskRemark.remark" style="margin-left:120px;width:550px;" type="textarea" />
          </el-row>
          <el-divider content-position="left">任务处理人</el-divider>
        </el-tab-pane>

        <!--动态的加载表单-->

        <el-tab-pane
          v-for="(item, index) in forms"
          :key="index"
          :label="item.linkname"
          :name="item.id"
        >
          <forms :form="item" :task="task" />
        </el-tab-pane>

      </el-tabs>
      <el-row style="text-align: center;margin-top:20px;">
        <el-button @click="toTaskList">任务列表</el-button>
        <template v-for="(item,index) in buttons">
          <el-button v-if="item.tsk_btn_type === 'submit'" :key="index" type="primary" @click="submitTask">{{ item.label }}</el-button>
          <el-button v-else-if="item.tsk_btn_type === 'fork'" :key="index" type="primary" @click="submitForkTask">{{ item.label }}</el-button>
          <el-button v-else-if="item.tsk_btn_type === 'join'" :key="index" type="primary" @click="submitJoinTask">{{ item.label }}</el-button>
          <el-button v-else-if="item.tsk_btn_type === 'branch'" :key="index" type="primary" @click="submitBranchTask">{{ item.label }}</el-button>
          <el-button v-else-if="item.tsk_btn_type === 'end'" :key="index" type="primary" @click="endTask">{{ item.label }}</el-button>
          <el-button v-else :key="index">{{ item.label }}</el-button>
        </template>
      </el-row>
    </my-theme-card>
  </el-container>
</template>
<script>
import request from '@/utils/request'
import forms from './forms'
import MyThemeCard from '../../../../components/MyThemeCard/index'
export default {
  components: {
    MyThemeCard,
    forms
  },
  props: {
    task: {
      type: Object,
      default: () => {}
    }
  },
  data: function() {
    return {
      taskRemark: {},
      currentTask: {},
      forms: [],
      buttons: []
    }
  },
  computed: {
    key_logic: function() {
      const { logic = {}} = this.$store.state.directory.directoryItem
      return logic
    },
    key_tskstat: function() {
      const { tskstat = {}} = this.$store.state.directory.directoryItem
      return tskstat
    },
    dir_tskstat: function() {
      return this.$store.state.directory.directory['tskstat']
    }
  },
  created() {
    this.$store.commit('directory/setDirectory', 'logic')
    this.$store.commit('directory/setDirectory', 'tskstat')
    this.currentTask = this.task
    if (this.currentTask.tstkno) {
      this.queryForms()
      this.queryButtons()
    }
  },
  methods: {
    // 改变链接
    changeLink: function(tab) {
      // console.log(tab)
      // this.router.push('/foo')
    },
    // 提交任务
    submitTask: function() {
      if (this.currentTask) {
        this.$emit('toChangePage', 'submitPage', this.currentTask, this.taskRemark)
      }
    },
    // 提交fork任务
    submitForkTask: function() {
      if (this.currentTask) {
        this.$emit('toChangePage', 'submitForkPage', this.currentTask, this.taskRemark)
      }
    },
    // 提交join任务
    submitJoinTask: function() {
      if (this.currentTask) {
        this.$emit('toChangePage', 'submitJoinPage', this.currentTask, this.taskRemark)
      }
    },
    // 提交branch任务
    submitBranchTask: function() {
      if (this.currentTask) {
        this.$emit('toChangePage', 'submitBranchPage', this.currentTask, this.taskRemark)
      }
    },
    // 结束任务
    endTask: function() {
      if (this.currentTask) {
        this.$emit('toChangePage', 'endPage', this.currentTask, this.taskRemark)
      }
    },
    // 查询该节点指向节点
    queryNextNode: function() {
      request({
        url: '/task/node/queryNextNode',
        method: 'post',
        data: this.procNode.before_node
      }).then(res => {
        if (res.result) {
          this.procNode.behind_nodes = res.data || {}
        } else {
          this.$message.error(res.msg)
        }
      }
      ).catch(() => {
      })
    },
    // 转到任务列表
    toTaskList: function() {
      this.$router.push({ name: '我的任务' })
    },
    // 查询该任务节点的表单
    queryForms: function() {
      request({
        url: '/task/form/queryFormsByTask',
        method: 'post',
        data: this.currentTask
      }).then(res => {
        this.$progress.done()
        if (res.result) {
          this.forms = res.data
        } else {
          this.$message.error(res.msg)
        }
      }).catch(() => { this.$progress.done() })
    },
    // 查询该任务节点的按钮
    queryButtons: function() {
      request({
        url: '/task/button/queryButtonsByTask',
        method: 'post',
        data: this.currentTask
      }).then(res => {
        this.$progress.done()
        if (res.result) {
          this.buttons = res.data
        } else {
          this.$message.error(res.msg)
        }
      }).catch(() => { this.$progress.done() })
    }
  }
}
</script>
